<template>
  <ve-card :showDivider="showDivider" :customContentStyle="computeContentStyle" v-bind="$attrs">
    <template #title>
      <view class="depositfee-title">
        <view class="title-text">{{ feeOption.feeName }}</view>
        <view class="depositfee-status" :class="[userDepositFreeze.number > 0 ? 'status-warn' : '']">
          {{ userDepositFreeze.text }}
        </view>
      </view>
    </template>
    <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
      {{ feeDetailIndex == 0 ? depositFreezeTooltip.rentalDeposit : depositFreezeTooltip.violationDeposit }}
      <ve-form-item
        :label="feeDetailItem.showItemName || feeDetailItem.itemName"
        :labelWidth="200"
        v-bind="formAttrs(feeDetailItem, feeDetailIndex)"
        :borderBottom="feeOption.remarkLabel ? true : feeDetailIndex != feeOption.childrenList.length - 1"
        unit="元"
        :disabled="feeDetailItem.disabled"
        :labelTooltipContent="feeDetailIndex == 0 ? depositFreezeTooltip.rentalDeposit : depositFreezeTooltip.violationDeposit"
      >
        <ve-input-number
          :precision="2"
          :disabled="feeDetailItem.disabled"
          :model-value="feeDetailItem.amount"
          @blur="
            (val) => {
              blurFn(val, feeDetailItem)
            }
          "
          @clear="() => (feeDetailItem.amount = '')"
        />
      </ve-form-item>
    </template>
  </ve-card>
</template>
<script setup>
  import { computed, reactive, toRefs, inject, onMounted, watch, watchEffect } from 'vue'
  import { getFreezeOrderCount } from '@/api/order/sOrder'
  const props = defineProps({
    index: Number,
    list: Array,
    requiredKey: String,
    showDivider: {
      type: Boolean,
      default: true,
    },
    inlineCard: Boolean,
    orderFormType: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['viewPriceCalendar', 'feeChange'])
  const formValue = inject('form')

  const feeOption = computed(() => {
    return props.list[props.index]
  })
  const computeContentStyle = computed(() => {
    if (props.inlineCard) {
      return {}
    } else {
      return { paddingBottom: 0 }
    }
  })

  const blurFn = (val, feeDetailItem) => {
    feeDetailItem.amount = val
    emit('feeChange', feeDetailItem, val, props.index)
  }

  // 处理必填逻辑
  const formAttrs = (item, index) => {
    if (item.required) {
      return {
        required: true,
        prop: `${props.requiredKey}${props.index}.childrenList.${index}.amount`,
      }
    } else {
      return {}
    }
  }

  // 押金提示语
  const depositFreezeTooltip = reactive({
    rentalDeposit: '',
    violationDeposit: '',
  })
  watch(
    () => formValue.value.orderSource,
    (newVal) => {
      console.log('newVal', newVal)
      if (formValue.value.orderSource == 2) {
        depositFreezeTooltip.rentalDeposit = '网络平台代收'
        depositFreezeTooltip.violationDeposit = '网络平台代收'
      } else {
        depositFreezeTooltip.rentalDeposit = '用户交车前需缴纳的押金金额'
        depositFreezeTooltip.violationDeposit = '用户还车后从租车押金中转'
      }
    },
    { immediate: true },
  )

  // 冻结中押金数量及提示语
  const userDepositFreeze = reactive({
    number: 0,
    text: '该用户无冻结中的押金',
  })
  // 监听承租人变化
  watch(
    () => formValue.value.memberId,
    (newVal) => {
      if (newVal) {
        // 获取用户押金状态
        getFreezeOrderCount({ memberId: newVal }).then((res) => {
          const freezeOrderCount = Number(res.result)
          userDepositFreeze.number = freezeOrderCount
          if (freezeOrderCount > 0) {
            userDepositFreeze.text = `该用户有冻结中的押金 ${freezeOrderCount} 笔，详情可到自驾短租订单或押金管理中查看。`
          } else {
            userDepositFreeze.text = '该用户无冻结中的押金'
          }
        })
      }
    },
    { immediate: true },
  )

  onMounted(() => {
    console.log('获取用户押金状态')
  })
</script>
<style lang="less" scoped>
  .depositfee-title {
    display: block;
    margin-bottom: 8rpx;
    .depositfee-status {
      font-weight: 400;
      font-size: 24rpx;
      color: #165dff;
      line-height: 34rpx;
      margin-top: 8rpx;
      &.status-warn {
        color: #f53f3f;
      }
    }
  }
</style>
